<!doctype html>
<html>
<head>
    <script src="jquery/jquery.js"></script>
    <link href="css/css.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no" />
    <meta charset="utf-8">
    <title>我的订单</title>
    <style>
        /*订单状态*/
        .state_box{ height:43px; position:relative}
        .state{ float:left; width:50%; line-height:43px; color:#65646b; font-size:14px; text-align:center}
        .blue_block{ width:50%; position:absolute; left:0; bottom:0; height:2px; background-color:#01aff0;}
        /*订单信息*/
        .move_box{ width:100%; overflow:hidden}
        .move{ width:500%; position:relative; clear:both; left:0}
        .order_box{ float:left; width:20%;}
        .order{ height:133px; position:relative; background-color:#fff; margin-bottom:14px;}
        .order_title{ line-height:40px; color:#191919; padding-left:4%; font-size:16px;}
        .order_text{ width:92%; margin-left:4%; position:relative; height:53px; padding-top:5px; box-sizing:border-box}
        .order_text h1,.order_text h2{ line-height:20px; color:#191919; font-size:14px;}
        .order_text p{ position:absolute;top:0;right:0; line-height:53px; color:#65646b; font-size:16px;}
        .cancel{ width:65px; height:25px; border:1px solid #ccc; text-align:center; line-height:25px; border-radius:3px; float:right; margin-top:6px; margin-right:4%; color:#65646b;}
        /*底部导航*/
        .nav_box{ width:100%; height:51px; position:fixed; left:0; bottom:0; background-color:#fff;}
        .nav_index,.nav_order,.nav_my{ width:33.3%; float:left;}
        .nav_box img{ width:18px; height:auto; position:relative; left:50%; margin-left:-9px; margin-top:8px;}
        .nav_box h1{ font-size:12px; text-align:center; color:#65646b; line-height:25px;}
        .nav_box .current_nav{ color:#01aff0;}

    </style>
</head>

<body style="background-color: #f9f9f9;">
<!--header顶部标题-->
<div class="header">我的订单
    <div class="header_left" onclick="window.history.go(-1)"><img src="images/return.png"></div>
</div>
<!--订单状态-->
<div class="state_box">
    <div class="state">进行中</div>
    <div class="state">已完成</div>
    <div class="blue_block"></div>
</div>
<!--订单信息-->
<div class="move_box">
    <div class="move">
        <!--未付款-->
        <div class="order_box">
            @if($rows !=null )
                @foreach($rows as $v)
                    <div class="order">
                        <div class="order_title">{{$v->matter}}</div>
                        @if($v->state==1)
                            <div class="order_text" onClick="document.location='order?id={{$v->id}}';">
                                @else
                                    <div class="order_text">
                                        @endif
                                        <div class="border_top"></div>
                                        <h1>{{$v->time}}-{{$v->over_time}}</h1>
                                        <h2>{{$v->site}}</h2>
                                        <p>￥{{$v->money}}</p>
                                        <div class="border_bottom"></div>
                                    </div>
                                    @if($v->state ==0)
                                        <div class="cancel" style="border:#ff7f00 1px solid; color:#ff7f00;" onClick="document.location='payment_order?id={{$v->id}}';">未付款</div>
                                    @else
                                        <div class="cancel" style="border:#ff7f00 1px solid; color:#ff7f00;" >支付成功</div>
                                    @endif
                                    <div class="border_bottom"></div>
                            </div>
                            @endforeach
                        @else
                            <p>&nbsp;</p>
                        @endif
                    </div>

                    <!--待评价-->
                    <div class="order_box">
                        @foreach($res as $v)
                            <div class="order">
                                <div class="order_title">{{$v->matter}}</div>
                                <div class="order_text" onClick="document.location='order?id={{$v->id}}';">
                                    <div class="border_top"></div>
                                    <h1>{{$v->time}}-{{$v->over_time}}</h1>
                                    <h2>{{$v->site}}</h2>
                                    <p>￥{{$v->money}}</p>
                                    <div class="border_bottom"></div>
                                </div>
                                @if($v->state ==2 )
                                    <div class="cancel" style="border:#ff7f00 1px solid; color:#ff7f00;" onClick="document.location='evaluate?id={{$v->id}}';">评价</div>
                                @else
                                    <div class="cancel" style="border:#ff7f00 1px solid; color:#ff7f00;">已完成</div>
                                @endif
                                <div class="border_bottom"></div>
                            </div>
                        @endforeach
                    </div>
        </div>
    </div>
</div>
<!--底部导航!-->
<div class="nav_box">
    <div class="border_top"></div>
    <div class="nav_index chenge" onclick="document.location='/';">
        <img src="images/index_gray.png">
        <h1 style=" ">首页</h1>
    </div>
    <div class="nav_order chenge" onclick="document.location='myorder';" >
        <img src="images/order_blue.png">
        <h1 style="color:#01AFF0">订单</h1>
    </div>
    <div class="nav_my chenge" onclick="document.location='index_content';" >
        <img src="images/my_gray.png">
        <h1>我的</h1>
    </div>
</div>
<script>
    $(".state:eq(0)").click(
        function(){
            $(".blue_block").animate({left:'0%'})
            $(".move").css("left","0%")
        }
    )
    $(".state:eq(1)").click(
        function(){
            $(".blue_block").animate({left:'50%'})
            $(".move").css("left","-100%")
        }
    )

</script>
</body>
</html>

